<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
	
		<style type="text/css">
			.rich-message-marker img {
				padding-right:7px;
			}
			.rich-message-label {
				color:red;
			}
		</style>		
			
			
		<rich:panel>
			<f:facet name="header">
				<h:outputText value="Form Validation. Using rich:message"/>
			</f:facet>
			
			<h:form>
				<h:panelGrid columns="3">
					<h:outputText value="Name:" />
					<h:inputText label="Name" id="name" required="true" value="#{userBean.name}">
						<f:validateLength minimum="3"  />
					</h:inputText>
					<rich:message for="name">
						<f:facet name="passedMarker">
							<h:graphicImage  value="/images/ajax/passed.gif" />	
						</f:facet>
						<f:facet name="errorMarker">
							<h:graphicImage value="/images/ajax/error.gif" />	
						</f:facet>
					</rich:message>
					
					<h:outputText value="Job:" />
					<h:inputText label="Job" id="job" required="true" value="#{userBean.job}">
						<f:validateLength minimum="3" maximum="50"  />
					</h:inputText>
					<rich:message for="job">
						<f:facet name="passedMarker">
							<h:graphicImage  value="/images/ajax/passed.gif" />	
						</f:facet>
						<f:facet name="errorMarker">
							<h:graphicImage  value="/images/ajax/error.gif" />	
						</f:facet>
					</rich:message>
					

					
					<h:outputText value="Address:" />
					<h:inputText label="Address" id="address" required="true" value="#{userBean.address}">
						<f:validateLength minimum="10" />
					</h:inputText>
					<rich:message for="address">
						<f:facet name="passedMarker">
							<h:graphicImage  value="/images/ajax/passed.gif" />	
						</f:facet>
						<f:facet name="errorMarker">
							<h:graphicImage  value="/images/ajax/error.gif" />	
						</f:facet>
					</rich:message>
					
					<h:outputText value="Zip:" />
					<h:inputText label="Zip" id="zip" required="true" value="#{userBean.zip}">
						<f:validateLength minimum="4" maximum="9"  />
					</h:inputText>
					<rich:message for="zip">
						<f:facet name="passedMarker">
							<h:graphicImage  value="/images/ajax/passed.gif" />	
						</f:facet>
						<f:facet name="errorMarker">
							<h:graphicImage value="/images/ajax/error.gif" />	
						</f:facet>
					</rich:message>
					
					<f:facet name="footer">
						<a4j:commandButton value="Validate" />
					</f:facet>
					
					
				</h:panelGrid>
			</h:form>
		</rich:panel>
	
	
</ui:composition>